import 'package:flutter/material.dart';

//ListView列表组件
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('wrap-案例'),
          backgroundColor: const Color.fromARGB(255, 2, 209, 154),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: [
        Row(
          children: [
            Text('热搜', style: Theme.of(context).textTheme.titleMedium),
          ],
        ),
        Divider(),
        Wrap(
          spacing: 10,
          runSpacing: 10,
          children: [
            Button("女装", onPressed: () {}),
            Button("笔记本电脑", onPressed: () {}),
            Button("玩具", onPressed: () {}),
            Button("文学", onPressed: () {}),
            Button("女装", onPressed: () {}),
            Button("时尚", onPressed: () {}),
            Button("女装", onPressed: () {}),
            Button("女装", onPressed: () {}),
          ],
        ),
        SizedBox(height: 10),
        Row(
          children: [
            Text('历史记录', style: Theme.of(context).textTheme.titleMedium),
          ],
        ),
        Divider(),
        Column(
          children: [
            ListTile(title: Text('历史记录1')),
            Divider(),
            ListTile(title: Text('历史记录2')),
            Divider(),
          ],
        ),
        SizedBox(height: 80),

        Padding(
          padding: EdgeInsets.fromLTRB(60, 0, 60, 0),
          child: OutlinedButton.icon(
            onPressed: () {},
            icon: Icon(Icons.delete_outline),
            label: Text('清空历史记录'),
            style: OutlinedButton.styleFrom(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              foregroundColor: Colors.black,
            ),
          ),
        ),
      ],
    );
  }
}

//自定义按钮组件
class Button extends StatelessWidget {
  final String text; //文本
  final void Function() onPressed; //按钮方法
  const Button(this.text, {super.key, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: this.onPressed,
      style: ButtonStyle(
        backgroundColor: WidgetStateProperty.all(
          const Color.fromARGB(255, 224, 221, 221),
        ),
        foregroundColor: WidgetStateProperty.all(Colors.black),
        shape: WidgetStateProperty.all(
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
        ),
      ),
      child: Text(text),
    );
  }
}
